<template>
	<view class="wrapper" @click="handleClick">
		<view style="width: 20%;padding-left: 10px;overflow: hidden;">
			<text class="time-wrapper time">{{shortDate}}</text>
		</view>
		<view class="cate-wrapper" style="width: 45%;overflow: hidden;">
			<text class="cate-text">{{item.type}}<br/>
				<text style="font-size: 20rpx;display: block;height: 20px;line-height: 20px;margin-top: -22px;">{{item.remark}}</text>
			</text>
		</view>
		<view style="width: 25%;overflow: hidden;">
			<text class="money">￥{{ money ? money : '' }} </text>
		</view>
		<view @click="removeRecord">
			<image class="delete cate-icon" src="../static/images/delete-HL.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		icons
	} from '@/common/icon.js'
	import {
		dateUtils,
		moenyUtils
	} from '@/common/util.js'
	export default {
		name: 'hxd-record',
		data() {
			return {
				img: '',
			}
		},
		computed: {
			shortDate() {
				return dateUtils.format_short(this.item.rq)
			},
			money() {
				return moenyUtils.twoDecimals(this.item.je)
			}
		},
		props: ['item'],
		methods: {
			handleClick() {
				this.$emit("modify")
			},
			removeRecord() {
				uni.showToast({
					title: "删个啥子"
				})
			}
		},
		created() {}
	}
</script>

<style>
	.wrapper {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		height: 120rpx;
		flex-direction: row;
		line-height: 120rpx;
		border-bottom: 1px solid #e5e5e5;
	}

	.wrapper:hover {
		background-color: #cccccc;
	}

	.time-wrapper {
		/* width:30%; */
		height: 118rpx;
		text-align: center;
		align-items: center;
	}

	.time {
		font-size: 20rpx;
		color: #999999;
	}

	.cate-wrapper {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		/* width: 30%; */
	}

	.cate-icon {
		height: 32rpx;
		width: 32rpx;
		margin-top: 45rpx;
		margin-left: 68rpx;
		margin-right: 20rpx;
	}

	.cate-text {
		font-size: 32rpx;
		color: #333333;
	}

	.money {
		font-size: 32rpx;
		color: #333333;
		/* width: 30%; */
		padding-left: 20rpx;
	}

	.delete {
		margin-left: 74rpx;
	}
</style>
